<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/detail.css">
</head>
<body>

  <div class="header container">
    商品详情

    <p class="active">
      <a href="./list.html">继续购物</a>
      <a href="./index.html">返回首页</a>
    </p>
  </div>

  <div class="box container">
    <!-- JS 渲染 -->
    <div class="left">
      <div class="more" id="more">
        <div class="show">
            <img src="https://p0.ssl.qhimg.com/t01e5fa11aa2531ae5d.png">
            <div></div>
        </div>
        <div class="list">
            <img src="https://p0.ssl.qhimg.com/t01e5fa11aa2531ae5d.png" data-show="https://p0.ssl.qhimg.com/t01e5fa11aa2531ae5d.png" data-enlarge="https://p0.ssl.qhimg.com/t01e5fa11aa2531ae5d.png" class="active">
            <img src="./img/2.small.jpg" data-show="./img/2.jpg" data-enlarge="./img/2.big.jpg" >
        </div>
        <div class="enlarge">
            <img src="https://p0.ssl.qhimg.com/t01e5fa11aa2531ae5d.png">
        </div>
    </div> </div>
        
    <div class="right">
      <div class="sInfo-title">360智能摄像机小水滴5C 2K高清版AC1P</div>
      <p class="sInfo-subtitle">300万高清像素 130°人眼广角</p>
      <div class="price">价&nbsp;&nbsp;格<span>122</span></div>
      <div class="top-notice-bar">物流公告：受疫情影响，北京、上海、黑龙江、吉林、辽宁、河北、江西、江苏、四川、甘肃、青海、新疆、宁夏回族自治区等部分地区暂缓发货。</div>

      <div class="cate">分&nbsp;&nbsp;类<a href="#">AAA</a><a href="#">BBB</a></div>
      <div class="sInfo-num">数&nbsp;&nbsp;量<span>-</span><span>1</span><span>+</span></div>
      <div class="buy-car"><button>立即购买</button><button>加入购物车</button></div>
    </div>

    </div>
  </div>

  <div class="params container"></div>

  <div class="footer">网页底部</div>

  <script src="../js/utils.js"></script>
    <script src="../js/enlarge.js"></script>
  <script src="../js/detail.js"></script>
  <!-- <script src="../js/enlarge.js"></script> -->
  <!-- <script>
    // document.addEventListener
    class EnlargeBox{
        constructor(select){
            this.select=document.querySelector(select)
            this.show=this.select.querySelector(".show")
            this.list=this.select.querySelector(".list")
            this.enlarge=this.select.querySelector(".enlarge")
            this.show_width=this.show.clientWidth
            this.show_height=this.show.clientHeight
            this.show_boxW=parseInt(window.getComputedStyle(this.show.lastElementChild).width)
            this.show_boxH=parseInt(window.getComputedStyle(this.show.lastElementChild).height)
            this.big_imgW = parseInt(window.getComputedStyle(this.enlarge.lastElementChild).width)
            this.big_imgH = parseInt(window.getComputedStyle(this.enlarge.lastElementChild).height)
            this.show_box=this.show.querySelector("div")
            // console.log(this.enlarge.firstElementChild.clientWidth)
            this.setScale()
            this.overout()
            this.showMove()
            this.changeImg()
        }
        setScale(){
            // console.log(this.big_imgW)
            this.enlarge_width=this.big_imgW*this.show_boxW/this.show_width+"px"
            this.enlarge_height=this.big_imgH*this.show_boxH/this.show_height+"px"
            // this.enlarge.style.width=(this.big_imgW*this.show_boxW)/this.show_width+"px"
            // this.enlarge.style.height=(this.big_imgH*this.show_boxH)/this.show_height+"px"
            this.enlarge.style.width=510+"px"
            this.enlarge.style.height=510+"px"
            
        }
        showMove(){
            // console.log("aaa")
            this.show.addEventListener("mousemove",e => {
                // this.show_boxW=this.show_box.offsetWidth
                // this.show_boxH=this.show_box.offsetHeight
                this.show_box.style.top=e.offsetY-this.show_boxH/2+"px"
                this.show_box.style.left=e.offsetX-this.show_boxW/2+"px"
                if(parseInt(this.show_box.style.top)<=0)this.show_box.style.top=0;
                if(parseInt(this.show_box.style.left)<=0)this.show_box.style.left=0;
                if(parseInt(this.show_box.style.top)>=(this.show_height-this.show_boxH))this.show_box.style.top=this.show_height-this.show_boxH+"px";
                if(parseInt(this.show_box.style.left)>=(this.show_width-this.show_boxW))this.show_box.style.left=this.show_width-this.show_boxW+"px"; 
                this.enlarge.lastElementChild.style.left=-(parseInt(this.show_box.style.left)*this.big_imgW/this.show_width)+"px"
                this.enlarge.lastElementChild.style.top=-(parseInt(this.show_box.style.top)*this.big_imgW/this.show_width)+"px"
                // console.log(this.enlarge.lastElementChild.style.left)
                // console.log(this.big_imgW)
            })
            
        }
        
        overout(){
            this.show.addEventListener("mouseover",(e) => {
                this.show_box.style.display="block"
                this.enlarge.style.display="block"
                // console.log(this.enlarge.style.display)

            })
            this.show.addEventListener("mouseout",() => {
                this.show_box.style.display="none"
                this.enlarge.style.display="none"
                
            })
        }
        changeImg(){
           this.list.addEventListener("click",e=>{
            //    console.log("aaa")
               if(e.target.nodeName==="IMG"){
                //    console.log(e.target)
                //    console.log(this.show)
                    this.show.querySelector("img").src=e.target.dataset.show
                    // this.show.firstElementChild.src=e.target.dataset.show
                    this.enlarge.firstElementChild.src=e.target.dataset.enlarge
                    for(let i=0;i<this.list.children.length;i++){
                        this.list.children[i].classList.remove("active")
                    }
                    e.target.classList.add("active")
                    // console.log(this.list.children)
               }
           })
        }
    }
    
// document.children
    let e1=new EnlargeBox("#more")
</script> -->

</body>
</html>
